<template>
  <div class="caseComp">
    <div class="caseCompTitle">编辑被投诉单位</div>
    <el-form :model="info" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="单位名称" prop="complaintName">
        <el-autocomplete
          class="inline-input"
          v-model="info.complaintName"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <template slot-scope="{ item }">
            <div class="name">
              {{ item.complaintName }}
            </div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="单位地址" prop="address">
        <el-input
          v-model="info.address"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="managerName">
        <el-input
          v-model="info.managerName"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="单位电话" prop="tel">
        <el-input
          v-model="info.tel"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="caseCompBtn">
      <el-button
        type="primary"
        v-sdc
        :loading="isLoading"
        class="commonBut saveBtn"
        @click="save"
        >保存</el-button
      >
      <el-button type="default" v-sdc class="commonBut" @click="finish"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'caseDepartmentLzh',
  props: {
    childData: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
  data() {
    const checkPhoneOrTel = (rule, value, callback) => {
      let flag1 = 1
      let flag2 = 1
      if (!/^1[3456789]\d{9}$/.test(value)) {
        flag1 = 2
      }
      if (!/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
        flag2 = 2
      }
      if (value) {
        if (flag1 == 2 && flag2 == 2) {
          callback(new Error('请输入正确的手机号或者座机号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      isLoading: false,
      info: {
        id: '',
        complaintName: '', //单位名称
        managerName: '', //项目性质
        tel: '', //单位电话
        address: '', //单位地址
      },
      initInfo: {},
      rules: {
        tel: [{ validator: checkPhoneOrTel, trigger: 'blur' }],
      },
      restaurants: [], //单位名称下拉框
    }
  },
  mounted() {
    const { id, complaintName, managerName, tel, address } = this.childData
    this.info = { id, complaintName, managerName, tel, address }
    this.initInfo = JSON.parse(JSON.stringify(this.info))
    this.restaurants = this.getEmployeesForAddSalary()
  },
  methods: {
    //单位名称
    querySearch(queryString, cb) {
      console.log(queryString, cb)
      var restaurants = this.restaurants
      this.methodaa(queryString, cb, restaurants)
    },
    methodaa(queryString, cb, restaurants) {
      this.getEmployeesForAddSalary().then((result) => {
        if (result) {
          console.log('result', result)
          this.restaurants = this.loadAll(result)
          var restaurants = this.restaurants
          var results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants
          console.log('results', results)
          cb(results)
        } else {
          // do other sth.
        }
      })
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.complaintName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    async getEmployeesForAddSalary() {
      var list = ''
      var data = {
        name: this.childData.name,
        idcard: this.childData.idcard,
      }
      await this.axios({
        method: 'post',
        url: 'api-r/ezrightbackpay/expand/getCompanyByUser',
        data: data,
      })
        .then(
          (response) => {
            list = response.data.result
          },
          (response) => {}
        )
        .catch((error) => {})
      return list
    },
    loadAll(data) {
      let serier = []
      if (data) {
        for (let i = 0, l = data.length; i < l; i++) {
          let item = data[i]
          serier.push({
            complaintName: item.complaintName,
            uscc: item.uscc,
            address: item.address,
            managerName: item.managerName,
            tel: item.tel,
          })
        }
      } else {
        // 如果没有请求到数据，则显示暂无数据！
        serier.push({ str: '暂无数据' })
      }
      return serier
    },
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.isLoading = true
          let params = { id: this.info.id }
          let flag = true
          for (let item in this.info) {
            if (this.info[item] != this.initInfo[item]) {
              flag = false
              params[item] = this.info[item]
            }
          }
          if (flag) {
            this.finish()
            return false
          }

          this.axios
            .post('api-r/rightbackpay/expand/edit', params)
            .then((res) => {
              if (!res.data.hasError) {
                this.$message({
                  type: 'success',
                  message: res.data.msg,
                })
                this.isLoading = false
                this.finish(1)
              } else {
                this.$message({
                  type: 'warning',
                  message: res.data.errorMsg,
                })
                this.isLoading = false
              }
            })
        }
      })
    },
    finish(index) {
      this.$emit('callback', { success: index == 1 ? true : false })
    },
    handleSelect(item) {
      console.log(item)
      this.info.complaintName = item.complaintName
      this.info.uscc = item.uscc
      this.info.address = item.address
      this.info.managerName = item.managerName
      this.info.tel = item.tel
    },
  },
}
</script>
<style lang="less" scoped>
.caseComp {
  border: 1px solid #dcdfe6;
  background-color: #f8f9fb;
  padding: 15px;
  &Title {
    color: #009588;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 12px;
  }
  &List {
    line-height: 36px;
    height: 36px;
    font-size: 14px;
    color: #444;
    margin-bottom: 12px;
    &Title {
      display: inline-block;
      width: 85px;
      text-align: right;
    }
    &Input {
      width: calc(100% - 95px);
    }

    .input {
      width: calc(100% - 170px);
    }
  }
  &Btn {
    text-align: center;
    margin: 24px 0 10px;
    .el-button {
      width: 120px;
    }
  }
}
.caseCompListInput {
  width: calc(100%);
}
.caseCompListSelect {
  width: calc(100% - 95px);
}
</style>
